<template>
	<div class="toast" v-show='isToastShow' ref="toast">
		<div>{{message}}</div>
	</div>
</template>

<script>
	export default {
		name: "Toast.vue",
		data() {
			return {
				message: '',
				isToastShow: false
			}
		},
		methods: {
			show(message, duration=1500, fontSize=25) {
				this.$refs.toast.style.fontSize = `${fontSize}px`
				this.isToastShow = true
				this.message = message

				setTimeout(() => {
					this.isToastShow = false
					// this.message = ''
				}, duration)
			}
		}
	}
</script>

<style scoped>
	.toast {
		z-index: 500;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #fff;
		padding: 8px 10px;
		background-color: rgba(0,0,0,.8);
		border-radius: 10px;
	}
</style>